<template>
  <div  style="width: 60%;margin: 35px auto;border: 5px solid #61c091;height: 700px">


      <h3 ><i class="el-icon-edit" style="color: #61c091" ></i>车辆图片信息</h3>


    <hr>
    <el-form ref="form" :model="carPic" label-width="80px">


    <div class="demo-image__placeholder">
      <div class="block">
        <img :src="carPic.imgPatha" style="width: 200px ;height: 200px;margin: 20px">
        <img :src="carPic.imgPathb" style="width: 200px ;height: 200px;margin: 20px">
        <img :src="carPic.imgPathc" style="width: 200px ;height: 200px;margin: 20px" >
      </div>
      <hr>
    </div>

    <div class="app-container">
      <el-form ref="form" :model="carPic.imgPatha" label-width="80px">
        <el-form-item label="45度" v-if="img==1">
          <pan-thumb :image="carPic.imgPatha" style="width: 30px; height: 30px"></pan-thumb>
          <el-button
            type="success"
            icon="el-icon-upload"
            style="position: absolute; bottom: 0px; margin-left: 40px"
            @click="imagecropperShow = true">上传45度图片
          </el-button>
          <!-- 文件上传的对话框 -->
          <ImageCropper
            :width="300"
            :height="300"
            :url="BASE_API + '/serviceoss'"
            @close="close"
            @crop-upload-success="Success"
            field='file'
            :key="imagecropperKey"
            v-show="imagecropperShow">
          </ImageCropper>
        </el-form-item>


        <el-form-item label="正面" v-if="img==2">
          <!-- 讲师头像的缩略图-->
          <pan-thumb :image="carPic.imgPathb" style="width: 30px; height: 30px"></pan-thumb>
          <!-- 文件上传的按钮 -->
          <el-button
            type="primary"
            icon="el-icon-upload"
            style="position: absolute; bottom: 0px; margin-left: 40px"
            @click="imagecropperShow = true">上传正面图片
          </el-button>

          <!-- 文件上传的对话框 -->
          <ImageCropper
            :width="300"
            :height="300"
            :url="BASE_API + '/serviceoss'"
            @close="close1"
            @crop-upload-success="fail"
            field='file'
            :key="imagecropperKey1"
            v-show="imagecropperShow">
          </ImageCropper>
        </el-form-item>



        <el-form-item label="背面" v-if="img == 3">
          <!-- 讲师头像的缩略图-->
          <pan-thumb :image="carPic.imgPathc" style="width: 30px; height: 30px"></pan-thumb>
          <!-- 文件上传的按钮 -->
          <el-button
            type="warning"
            icon="el-icon-upload"
            style="position: absolute; bottom: 0px; margin-left: 40px"
            @click="imagecropperShow = true">上传背面图片
          </el-button>


          <!-- 文件上传的对话框 -->
          <ImageCropper
            :width="300"
            :height="300"
            :url="BASE_API + '/serviceoss'"
            @close="close2"
            @crop-upload-success="notFail"
            field='file'
            :key="imagecropperKey2"
            v-show="imagecropperShow">
          </ImageCropper>
        </el-form-item>

        <el-form-item>
        <el-button type="success" :disabled="saveBtnDisabled" @click="CarPic1" plain>选择45度图片</el-button>
        <el-button type="primary" :disabled="saveBtnDisabled" @click="CarPic2" plain>选择正面图片</el-button>
        <el-button type="warning" :disabled="saveBtnDisabled" @click="CarPic3" plain>选择背面图片</el-button>

        </el-form-item>
        <el-form-item >
          <el-button type="primary" :disabled="saveBtnDisabled" @click="saveCarPic" plain >保存图片</el-button>
        </el-form-item>


      </el-form>
    </div>
    </el-form>


  </div>


</template>


<script>

// import carApi from "@/api/rao_car.js";
import ImageCropper from "@/components/ImageCropper";
import PanThumb from "@/components/PanThumb";


import carPicApi from "@/api/rao_carPic.js";


export default {
  components: { ImageCropper, PanThumb}, //-- 声明组件

  data(){
    return{

      img:1,
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      newFiles:{},
      carPic: {
        cid:'',
        imgPatha:'',
        imgPathb:'',
        imgPathc:'',
      },

      imagecropperShow: false,  //-- 控制文件上传的对话框显示
      BASE_API: process.env.BASE_API,
      imagecropperKey: 0,     //-- 一个标记
      imagecropperKey1: 0,
      imagecropperKey2: 0,
      saveBtnDisabled: false,


    };

  },

  watch: {
    //-- 监听路由是否有发生变化
    $route(to, form) {
      this.init();
    },
  },


  created() {
    this.init();

  },

  methods:{
    CarPic1(){
      this.img = 1
    },
    CarPic2(){
      this.img = 2
    },
    CarPic3(){
      this.img = 3
    },

    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id;
        this.getCarPicById(id);
      } else {
        this.carPic = {};
      }

    },
    getCarPicById(id){
      carPicApi.getCarPicById(id).then((response) => {
        this.carPic = response.data.items;

      });
    },
    close() {
      //-- 所谓的关闭就是把图片上传的对话框隐藏起来
      this.imagecropperShow = false
      this.imagecropperKey = this.imagecropperKey + 1
    },
    close1() {
      //-- 所谓的关闭就是把图片上传的对话框隐藏起来
      this.imagecropperShow = false
      this.imagecropperKey1 = this.imagecropperKey1 + 2
    },
    close2() {
      //-- 所谓的关闭就是把图片上传的对话框隐藏起来
      this.imagecropperShow = false
      this.imagecropperKey2 = this.imagecropperKey2 + 3
    },
    Success(data) {
      this.img = 2

      this.imagecropperShow = false
      this.carPic.imgPatha = data.url
      this.imagecropperKey = this.imagecropperKey + 1
    },

    fail(data1) {
      this.img = 3
      this.imagecropperShow = false
      this.carPic.imgPathb = data1.url
      this.imagecropperKey1 = this.imagecropperKey1 + 2
    },

    notFail(data2) {
      this.img = 1
      this.imagecropperShow = false
      this.carPic.imgPathc = data2.url
      this.imagecropperKey2 = this.imagecropperKey2 + 3
    },
    saveCarPic() {
      carPicApi.saveCarPic(this.carPic).then((response) => {
        //-- 弹出保存成功的确认框
        this.$message({
          message: "添加成功",
          type: "success",
        });
        //-- 页面跳转到列表页面  利用路由跳转页面
        this.$router.push({ path: "/basic_setting/car_list" });
      });
    },

  }
}
</script>

<style >

</style>
